{% extends 'mould/auto.html' %}

{% block title %}
    DoaminTrade-repasswd
{% endblock %}

{% block body %}
    <div class="account-pages">
        <div class="wrapper-page">
            <div class="text-center">
                <a href="/index" class="logo"><span>DoaminTrade<span>to</span></span></a>
            </div>
            <div class="m-t-40 card-box">
                <div class="text-center">
                    <h4 class="text-uppercase font-bold m-b-0">重置密码</h4>
                </div>
                <div class="panel-body">
                    <form class="am-form" action="/repasswd" method="POST">
                        <div class="am-g">
                            <div class="am-form-group">
                                <label for="username"><i style="color: red;">* </i>邮箱<span style="color: red; text-align: center; margin: 65px;"><i>{{ msg_tag }}</i></span></label>
                                <input id="username" type="email" class="am-radius" name='email' placeholder="邮箱">
                            </div>
                            <div class="am-form-group form-horizontal m-t-20">
                                <label for="passwd1"><i style="color: red;">* </i>新密码<span id='match_passwd_len' style="color: red; text-align: center; margin: 15px; display: none;"><i>密码最少6个字符</i></span></label>
                                <input id='passwd1' type="password" size=6 class="am-radius" name="passwd1" placeholder="新密码">
                            </div>
                            <div class="am-form-group form-horizontal m-t-20">
                                <label for="passwd2"><i style="color: red;">* </i>再次确认密码<span id='match_passwd' style="color: red; text-align: center; margin: 15px; display: none;"><i>密码不匹配</i></span></label>
                                <input id='passwd2' type="password" size=6 class="am-radius" name="passwd2" placeholder="再次确认密码">
                            </div>
                          <div class="form-group">
                                <label for="check"><i style="color: red;">* </i>验证码(邮箱验证码)</label>
                                <div class="row">
                                    <div class="col-xs-7">
                                        <input id='check' style="width: 180px;display: inline;" type="text" class="form-control" size=4 placeholder="请输入验证码" name="email_check_code">
                                        <input type="button" id="send_email_check" class="am-btn am-radius" style="margin: 10px;" value="发送验证码" >
                                    </div>
                                </div>
                            </div>

                            <div class="am-form-group" style="line-height: 60px;">
                                <button id='comm' type="submit" class="am-btn am-btn-primary am-radius" disabled="disabled"
                                        style="width: 100%;height: 100%;">确认修改
                                </button>
                            </div>

                            <div class="am-form-group ">
                                <a style="float: right" href="/signin" class="text-muted"><i class="fa fa-lock m-r-5"></i>登录</a>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
    <script src="/static/js/jquery.min.js"></script>
    <script>
        $('#passwd1').change(function () {
            if ($('#passwd1').val().length < 6) {
                $('#match_passwd_len').css('display', '');
                $('#comm').attr('disabled', 'disabled');
            }else {
                $('#match_passwd_len').css('display', 'none');
                $('#comm').removeAttr('disabled');
            };
        });

        $('#passwd2').focus(function () {
            if ($('#passwd1').val() != $('#passwd2').val()) {
            $('#match_passwd').css('display', '');
            $('#comm').attr('disabled', 'disabled');
        } else{
            $('#match_passwd').css('display', 'none');
            $('#comm').removeAttr('disabled');
        };
        });

        $('#send_email_check').click(function () {
            user_email = document.getElementById('username').value;
                $.ajax({
                    url: '/send_email',
                    data: {'email':user_email},
                    type: 'POST',
                    datatype: 'JSON'
                });
        });
    </script>
{% endblock %}